<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8"%>
<%@taglib prefix="mvc" uri="http://www.springframework.org/tags/form" %>
<%@taglib prefix="fmt" uri="http://www.springframework.org/tags" %>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>供应商管理新建</title>
    <link rel="stylesheet" type="text/css" href="../../lib/pagination/style/pagination.css"/>
    <link rel="stylesheet" type="text/css" href="../../css/base.css"/>
    <link rel="stylesheet" type="text/css" href="../../css/news/center.css"/>
    <link rel="stylesheet" href="/lib/laydate/need/laydate.css">
    <script type="text/javascript" src="../../js/news/jquery-1.9.1.js"></script>
    <script src="/lib/jQuery-File-Upload-master/jquery-1.8.3.min.js" type="text/javascript" charset="utf-8"></script>
    <script src="/lib/jQuery-File-Upload-master/jquery.ui.widget.js" type="text/javascript" charset="utf-8"></script>
    <script src="/lib/jQuery-File-Upload-master/jquery.iframe-transport.js" type="text/javascript" charset="utf-8"></script>
    <script src="/lib/jQuery-File-Upload-master/jquery.fileupload.js" type="text/javascript" charset="utf-8"></script>
    <script src="/lib/laydate/laydate.js"></script>
    <script type="text/javascript" src="/js/base/tablePage.js"></script>
    <script src="../../js/news/page.js"></script>
    <script src="../../js/base/base.js" type="text/javascript" charset="utf-8"></script>
    <script src="../../lib/pagination/js/jquery.pagination.min.js" type="text/javascript" charset="utf-8"></script>
    <script src="../../lib/layer/layer.js?20201106"></script>
    <script src="../../lib/laydate/laydate.js"></script>
    <script src="../js/sys/citys.js" type="text/javascript" charset="utf-8"></script>
    <style>
        * {font-family: "Microsoft Yahei" !important;}
        b{
            color: red;
        }
        .head_title{
            margin-top: 10px;
            height: 40px;
            position: relative;
        }
        .head_title .title{
            margin-left: 22px;
        }
        .head_title span{
            float: none;
            /*margin-top: 9px;*/
            font-size: 22px;
            color: #333;
            display: inline-block;
            margin-left: 10px;
            vertical-align: middle;
            margin-top: -6px;
        }
        .saveBtn{
            display: block;
            float: left;
            background: url(../img/confirm.png) no-repeat;
            border: none;
            width: 70px;
            height: 29px;
            line-height: 29px;
            margin-left: 10px;
            cursor: pointer;
        }
        .resetBtn {
            display: block;
            float: left;
            background: url(../img/news/new_filling.png) no-repeat;
            border: none;
            width: 70px;
            height: 29px;
            line-height: 29px;
            margin-left: 10px;
            cursor: pointer;
        }
        .div_Btn{
            position: absolute;
            left: 43%;
            margin: 10px auto;
        }
        select{
            width: 250px;
            height: 30px;
        }
        .newTbale tr td {
            border-right: #ccc 1px solid;
            padding: 5px 30px;
        }
        input[type="text"]{
            width: 250px;
            height: 30px;
        }
        .newTbale {
            width: 85%;
            margin: 0px auto;
        }
        table {
            border-collapse: collapse;
            border-spacing: 0;
        }
        #ajaxforms{
            position: relative;
        }
        #query_uploadArr{
            border: 1px solid #ddd;
            min-height: 45px;
            max-height: 102px;
            overflow: auto;
        }
    </style>
    <link rel="stylesheet" type="text/css" href="/css/commonTheme/${sessionScope.InterfaceModel}/commonTheme.css"/>
</head>
<body>
<!--head开始-->
<div class="head_title">
    <div class="title">
        <img src="/img/commonTheme/${sessionScope.InterfaceModel}/flow_run_title.png"><span >供应商管理新建</span>
    </div>
</div>
<div id="pagediv">
    <%--<form id="ajaxforms" action="/supplier/insertSupplier">--%>
        <table class="newTbale">
            <tr>
                <td>供应商名称:</td>
                <td><input type="text" name="supplierName" /><b>*</b></td>
                <td>邮政编码:</td>
                <td><input type="text" name="zipCode" maxlength="6"/></td>
            </tr>
            <tr>
                <td>供应商电话:</td>
                <td><input type="text" name="phone" maxlength="11"/><b>*</b></td>
                <td>传真号码:</td>
                <td><input type="text" name="fax" maxlength="15"/></td>
            </tr>
            <tr>
                <td>供应商网址:</td>
                <td><input type="text" name="website" /></td>
                <td>电子邮箱:</td>
                <td><input type="text" name="email" type="email" /><b>*</b></td>
            </tr>
            <tr>
                <td>供应商地址:</td>
                <td><input type="text" name="address" /><b>*</b></td>
                <td>所在地区:</td>
                <td>
                    <select name="province" style="width: 125px" id="sheng">
                        <option>请选择</option>
                    </select>
                    <select name="city" style="width: 125px" id="city1">
                        <option>请选择</option>
                    </select>
                </td>
            </tr>
            <tr>
                <td>开户行:</td>
                <td><input type="text" name="registerBank" /></td>
                <td>银行账号:</td>
                <td><input type="text" name="bankAccount" maxlength="19" /></td>
            </tr>
            <tr>
                <td>户名:</td>
                <td><input type="text" name="accountName"/></td>
                <td>备注:</td>
                <td><input type="text" name="remark"/></td>
            </tr>
            <tr>
                <td>附件:</td>
                <td>
                    <form id="uploadimgform" style="height: 30px;" target="uploadiframe"  action="../upload?module=attachment" enctype="multipart/form-data" method="post">
                        <input type="file" multiple="multiple" name="file" id="uploadinputimg"  class="w-icon5" style="position: absolute;opacity: 0;width: 70px;cursor:pointer;
                        filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0)">
                        <div id="query_uploadArr" name="query_uploadArr" style="display: block;width:240px;height:80px;float:left">
                        </div>
                        <a id="uploadimg" style="cursor: pointer;color:#2F8AE3;line-height: 80px;margin-left:10px">附件上传</a>
                    </form>
                </td>
            </tr>
        </table>
    <%--</form>--%>

</div>
<div class="div_Btn">
    <div class="saveBtn" onclick="ajaxforms()">
        <span style="margin-left: 32px;">保存</span>
    </div>
    <div class="resetBtn" onclick="javascript:window.location.href='/supplier/showSupplier';">
        <span  style="margin-left: 32px;" >返回</span>
    </div>
</div>
</body>
<script>
    function  ajaxforms() {
        var email=$('[name="email"]').val();
        var phone=$('[name="phone"]').val();
        var bo = /^\w+((-\w+)|(\.\w+))*\@[A-Za-z0-9]+((\.|-)[A-Za-z0-9]+)*\.[A-Za-z0-9]+$/.test(email);
        var bo1 = !(/^1[3456789]\d{9}$/).test(phone);
        var fileId="";
        var fileName="";
        for(var i=0;i<$('.inHidden').length;i++){
            fileId += $('.inHidden').eq(i).val();
            fileName += $('.inHidden').eq(i).attr('name');
        }
        var data={
            "attachmentId":fileId,
            "attachmentName":fileName,
            "email":email,
            "phone":phone,
            "supplierName":$('[name="supplierName"]').val(),
            "zipCode":$('[name="zipCode"]').val(),
            "fax":$('[name="fax"]').val(),
            "address":$('[name="address"]').val(),
            "website":$('[name="website"]').val(),
            "registerBank":$('[name="registerBank"]').val(),
            "bankAccount":$('[name="bankAccount"]').val(),
            "accountName":$('[name="accountName"]').val(),
            "remark":$('[name="remark"]').val(),
            "province":$(".newTbale tr td").find("select[name=province]").val(),
            "city":$(".newTbale tr td").find("select[name=city]").val()

        }
        if($('[name="supplierName"]').val() == ''){
            layer.msg('请输入供应商名称 ！',{icon:2});
        }else if(bo1 == true){
            layer.msg('供应商电话格式错误！',{icon:2});
        }else if($('[name="email"] option:selected').val() == ''){
            layer.msg('请选择电子邮箱！',{icon:2});
        } else if(bo == false){
            layer.msg('邮箱格式错误 ！',{icon:2});
        }else if($('[name="address"] option:selected').val() == ''){
            layer.msg('请选择供应商地址！',{icon:2});
        }else {
            $.ajax({
                url: '/supplier/insertSupplier',
                type: 'post',
                dataType: 'json',
                data: data,
                success: function (data) {
                    if (data.flag) {
                        layer.open({
                            type: 1
                            , offset: type //具体配置参考：http://www.layui.com/doc/modules/layer.html#offset
                            , id: 'layerDemo' + type //防止重复弹出
                            , content: '<div style="padding: 20px 100px;">' + "保存成功!" + '</div>'
                            , btn: '确定'
                            , btnAlign: 'c' //按钮居中
                            , shade: 0 //不显示遮罩
                            , yes: function () {
                                layer.closeAll();
                                window.location.href = '/supplier/showSupplier'
                            }
                        });
                    } else {
                        layer.open({
                            type: 1
                            , offset: type //具体配置参考：http://www.layui.com/doc/modules/layer.html#offset
                            , id: 'layerDemo' + type //防止重复弹出
                            , content: '<div style="padding: 20px 100px;">' + "保存失败!" + '</div>'
                            , btn: '确定'
                            , btnAlign: 'c' //按钮居中
                            , shade: 0 //不显示遮罩
                            , yes: function () {
                                layer.closeAll();

                            }
                        });
                    }
                },
                error: function (data) {
                    layer.open({
                        type: 1
                        , offset: type //具体配置参考：http://www.layui.com/doc/modules/layer.html#offset
                        , id: 'layerDemo' + type //防止重复弹出
                        , content: '<div style="padding: 20px 100px;">' + "保存失败!" + '</div>'
                        , btn: '确定'
                        , btnAlign: 'c' //按钮居中
                        , shade: 0 //不显示遮罩
                        , yes: function () {
                            layer.closeAll();

                        }
                    });
                }
            })
        }
    }
    $('#query_uploadArr').on('click','.deImgs',function(){
        var data=$(this).parents('.dech').attr('deUrl');
        var dome=$(this).parents('.dech');
        deleteChatment(data,dome);
    });
    //删除附件
    function deleteChatment(data,element){
        layer.confirm('确定要删除吗？', {<%--确定要删除吗--%>
            btn: ['确定','取消'], //按钮  <%--确定 取消--%>
            title:'删除'  <%--删除附件--%>
        }, function(){
            //确定删除，调接口
            $.ajax({
                type:'get',
                url:'../delete',
                dataType:'json',
                data:data,
                success:function(res){

                    if(res.flag == true){
                        layer.msg('删除成功', { icon:6});<%--删除成功--%>
                        element.remove();
                    }else{
                        layer.msg('删除失败', { icon:6});<%--删除失败--%>
                    }
                }
            });

        }, function(){
            layer.closeAll();
        });
    }
    $(function () {
        var duanxin='';
        var flag=0;
        var sheng='<option value="">请选择</option>';
        for(var i=0;i<json.provinces.length;i++){
            sheng+='<option value="'+json.provinces[i].name+'">'+json.provinces[i].name+'</option>'
        }
        $('#sheng').html(sheng);
        $('#sheng').change(function () {
            var prov=$(this).val();
            var citys='<option value="">请选择</option>';
            for(var i=0;i<json.provinces.length;i++){
                if (json.provinces[i].name==prov){
                    if(json.provinces[i].citys!=''&&json.provinces[i].citys!=undefined){
                        for(var j=0;j<json.provinces[i].citys.length;j++){
                            citys+='<option value="'+json.provinces[i].citys[j]+'">'+json.provinces[i].citys[j]+'</option>'
                        }
                    }
                }
            }
            $('#city1').html(citys);
        })
    })
    //        附件上传
    $('#uploadimg').click(function(){
        var me=this;
        $('#uploadinputimg').click()
    })
    $('#uploadinputimg').fileupload({
        dataType:'json',
        done: function (e, data) {
            console.log(data)
//            if(data.done.length>1){
//                layer.alert('只能上传一个附件!');
//                return ;
//            }
            if(data.result.obj != ''){
                var data = data.result.obj;
                var str = '';
                var str1 = '';

                for (var i = 0; i < data.length; i++) {
                    var gs = data[i].attachName.split('.')[1];
                    if(gs == 'jsp'||gs == 'css'||gs == 'js'||gs == 'html'||gs == 'java'||gs == 'php' ){
                        str += '';
                        layer.alert('jsp、css、js、html、java文件禁止上传!',{},function(){
                            layer.closeAll();
                        });
                    }else{
                        str+='<div class="dech" deUrl="'+encodeURI(data[i].attUrl)+'" style="display:block;"><a class="ATTACH_a" NAME="'+data[i].attachName+'*" href="<%=basePath %>download?'+encodeURI(data[i].attUrl)+'">'+data[i].attachName+'</a><img class="deImgs" style="margin-left:5px;cursor: pointer;" src="../img/file/icon_deletecha_03.png"/><input type="hidden" NAME="'+data[i].attachName+'*"  class="inHidden" value="'+data[i].aid+'@'+data[i].ym+'_'+data[i].attachId+',"></div>';
                    }
                }
                $('#query_uploadArr').append(str);
            } else{
                //alert('添加附件大小不能为空!');
                layer.alert('添加附件大小不能为空!',{},function(){
                    layer.closeAll();
                });
            }
        }
    });
</script>

</html>
